<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户界面</title>
  <link rel="stylesheet" type="text/css" href="../static/all/css/AllUserPage.css" media="all">
  <script src="../static/all/js/jquery-1.11.1.min.js"></script>
  <script src="../static/all/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="../static/all/css/bootstrap.min.css" media="all" />
  <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="../static/all/css/btn.css" media="all" />
  <link rel="stylesheet" type="text/css" href="../static/all/css/bootstrap-table.css" media="all" />
  <link rel="stylesheet" type="text/css" href="../static/all/js/bootstrap-table.js" media="all" />

  <script src="../static/all/js/echarts.js"></script>
  <style>
    .innerContent{
      background-color: white;
      border: 0px solid #000000;

      -moz-border-radius: 15px;

      -webkit-border-radius: 15px;

      border-radius:20px;
    }

    form>div{
      margin-left: 40px;
      margin-right: 40px;
    }

    .menu>li{
      list-style-type: none;
    }

  </style>
</head>

<body>
  <input type="checkbox" id="check" />
  <label for="check">
    <svg viewBox="0 0 30 30" width="30" height="30">
      <path id="one" d="M4 10h22M4" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>
      <path id="two" d="M4 20h22M4" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>
    </svg> 菜 单
  </label>
  <aside th:fragment="nav">
    <div class="top">
      <h2>目 录</h2>
      <ul class="menu">
        <li><a th:href="@{/logout}"><button class="custom-btn btn-12"><span>Click!</span><span>注销</span></button></a></li>
      </ul>
    </div>
    <div style="font-size: 15px;font-family: serif;margin-top: 500px" class="bottom">
      <p>欲买桂花同载酒,终不似,少年游</p>
    </div>
  </aside>  <article>
    <div class="wrapper">

      <div class="container">
        <div class="row">
          <div class="col-sm-12">
          <div class="col-sm-6">
            <div><form th:href="@{/admin/myExamHistory}">
              <input name="checkname" placeholder="输入你要查找的学生姓名" class="form-control">
              <button type="submit" class="btn-primary">查找</button></a>
            </form></div>
            <div class="form-group" style="background-color: white">
              <table id="table" style="text-align: center" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>
                    姓名
                  </th>
                  <th>
                    是否限时
                  </th>
                  <th>
                    测试模式
                  </th>
                  <th>
                    测试时间
                  </th>
                  <th>
                    成绩
                  </th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="exam:${pageInfo.list}">
                  <td th:text="${exam.username}"></td>
                  <td th:text="${exam.timelimit}==1?'是':'否'"></td>
                  <td th:text="${exam.examTypename}"></td>
                  <td th:text="${exam.timeLength}"></td>
                  <td th:text="${exam.examScore}"></td>
                </tr>
                </tbody>
              </table>
            </div>
            <div>
              <p >当前第<span th:text="${pageInfo.pageNum}"></span>页，总<span th:text="${pageInfo.pages}"></span>页，共<span th:text="${pageInfo.total}"></span>条记录</p>
            </div>
            <nav aria-label="...">
              <ul class="pager">
                <li><a th:href="@{/admin/myExamHistory(pagenum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a></li>
                <li><a th:href="@{/admin/myExamHistory(pagenum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a></li>
              </ul>
            </nav>
          </div>
          <div class="col-sm-6">
            <div id="main" style="width: 500px;height:300px; background-color: white"></div>
            <div>最近7次成绩</div>
            <div id="main1" style=" margin-top:20px;width: 500px;height:300px; background-color: white"></div>
          </div>
          </div>
          <div class="col-sm-6"></div>
          <div class="col-sm-6">
          </div>
        </div>
      </div>
    </div>
  </article>
</body>

<script th:inline="javascript">
  var hasPreviousPage = [[${pageInfo.hasPreviousPage}]];
  var nextPage = [[${pageInfo.nextPage}]];
  var pages = [[${pageInfo.pages}]];
  var hasNextPage = [[${pageInfo.hasNextPage}]];
  var hasNextPage = [[${pageInfo.prePage}]];
  var ExamScore = [[${ExamScore}]];
  var listname = [[${listname}]];
  var listvalue = [[${listvalue}]];




  function showone(){
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      xAxis: {
        type: 'category',
        data: ['一', '二', '三', '四', '五', '六', '七']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: ExamScore,
          type: 'line'
        }
      ]
    };

    option && myChart.setOption(option);
  }


  function showtwo(){
    var chartDom1 = document.getElementById('main1');
    var myChart1 = echarts.init(chartDom1);
    var option1;

    /*option1 = {
      xAxis: {
        type: 'category',
        data: listname
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: listvalue,
          type: 'bar'
        }
      ]
    };*/
    var data = [];
    for(j = 0; j < listname.length; j++) {
      data.push({"value" : listvalue[j],"name" : listname[j]});
    }
    console.log(data);

    option1 = {
      legend: {
        top: 'bottom'
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [20, 100],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: data
        }
      ]
    };

    option1 && myChart1.setOption(option1);
  }




  $(function () {
    showone();
    showtwo();


  })

  function prepage() {
    $.ajax({
      url: "/admin/myExamHistory",
      type: 'post',
      data: {
        "pagenum" : hasPreviousPage?prepage:1,
      },
      success: function (result) {
        // console.log(result);
        //document.body.innerHTML="";
        $('#table').bootstrapTable('refresh');
       // document.write(result);
      },
      error : function (result) {
        // console.log(result);
        alert("请重试.");
      }
    });
  }


  function nextpage() {
    $.ajax({
      url: "/admin/myExamHistory",
      type: 'post',
      data: {
        "pagenum" : hasNextPage?nextPage:pages,
      },
      success: function (result) {
        // console.log(result);
        document.body.innerHTML="";
        document.write(result);
      },
      error : function (result) {
        // console.log(result);
        alert("请重试.");
      }
    });
  }
</script>



</html>